part of 'page.dart';

const _kDefaultStateTileTrailingWidth = 40.0;

class _SingleCollectionPageView extends StatelessWidget with ScreenUtilMixin {
  const _SingleCollectionPageView({
    required _SingleCollectionPageWloc wloc,
  }) : _wloc = wloc;

  final _SingleCollectionPageWloc _wloc;

  Widget _buildNavigationBarLeading({
    required _SingleCollectionPageWlocState state,
    required BuildContext context,
  }) {
    if (state is _DefaultState) {
      return AppBackButton(
        onPressed: Navigator.of(context).pop,
      );
    }

    if (state is _KnownLexicalItemSelection) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarCancelButtonTitle,
        navigationButtonAutoSizeGroup:
            _wloc.navigationButtonAutoSizeGroups[_KnownLexicalItemSelection],
        onPressed: _wloc.onKnownLexicalItemSelectionCancellationButtonPressed,
      );
    }

    if (state is _LexicalItemRemoval) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarCancelButtonTitle,
        navigationButtonAutoSizeGroup: _wloc.navigationButtonAutoSizeGroups[_LexicalItemRemoval],
        onPressed: _wloc.onLexicalItemRemovalCancellationButtonPressed,
      );
    }

    if (state is _CustomCollectionRenaming) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarCancelButtonTitle,
        navigationButtonAutoSizeGroup:
            _wloc.navigationButtonAutoSizeGroups[_CustomCollectionRenaming],
        onPressed: _wloc.onCustomCollectionRenamingCancellationButtonPressed,
      );
    }

    throw UnimplementedError();
  }

  Widget? _buildNavigationBarTrailing({
    required _SingleCollectionPageWlocState state,
    required BuildContext context,
  }) {
    if (state is _DefaultState) {
      final buttonWidth = kNavigationBarSettingsIconSize * kMaterialIconRatio +
          kVisibleNavigationBarHorizontalIconPadding * logWidthScaleFactor * 2;

      return AppIconButton(
        height: double.infinity,
        width: buttonWidth,
        icon: Icon(
          Icons.settings,
          color: CoreTheme.of(context).primaryColor,
          size: kNavigationBarSettingsIconSize,
        ),
        onPressed: _wloc.onSettingsIconPressed,
      );
    }

    if (state is _KnownLexicalItemSelection) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarDoneButtonTitle,
        isDefault: true,
        navigationButtonAutoSizeGroup:
            _wloc.navigationButtonAutoSizeGroups[_KnownLexicalItemSelection],
        onPressed: _wloc.onKnownLexicalItemSelectionCompletionButtonPressed,
      );
    }

    if (state is _LexicalItemRemoval) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarRemoveButtonTitle,
        isDefault: true,
        navigationButtonAutoSizeGroup: _wloc.navigationButtonAutoSizeGroups[_LexicalItemRemoval],
        onPressed: _wloc.onLexicalItemRemovalCompletionButtonPressed,
      );
    }

    if (state is _CustomCollectionRenaming) {
      return ScaledNavigationBarTextButton(
        text: CoreTranslation.of(context).navigationBarDoneButtonTitle,
        isDefault: true,
        navigationButtonAutoSizeGroup:
            _wloc.navigationButtonAutoSizeGroups[_CustomCollectionRenaming],
        onPressed: _wloc.onCustomCollectionRenamingCompletionButtonPressed,
      );
    }

    return null;
  }

  Widget? _buildNavigationBarMiddle({
    required _SingleCollectionPageWlocState state,
    required BuildContext context,
  }) {
    late String title;

    if (state is _DefaultState) {
      title = getCollectionLocalizedTitle(
        collection: state.collection,
        context: context,
      );
    } else if (state is _KnownLexicalItemSelection) {
      title = HomeCoreTranslation.of(context).lexicalItemSelectionInstruction;
    } else if (state is _LexicalItemRemoval) {
      title = HomeCoreTranslation.of(context).lexicalItemSelectionInstruction;
    } else if (state is _CustomCollectionRenaming) {
      title = CollectionCoreTranslation.of(context).collectionTitleEnteringInstruction;
    }

    return NavigationBarTitle(
      title: title,
    );
  }

  Widget _buildTileTrailingPlaceholder({
    required double width,
  }) {
    return SizedBox(
      width: width * defaultScaleFactor,
    );
  }

  Widget _buildTileNavigationIndicator() {
    return SizedBox(
      width: _kDefaultStateTileTrailingWidth * defaultScaleFactor,
      child: const Align(
        alignment: Alignment.centerRight,
        child: TileNavigationIndicator(),
      ),
    );
  }

  Widget _buildRenameCollectionActionTile({
    required VoidCallback? onPressed,
    required BuildContext context,
  }) {
    return ActionTile(
      title: SingleCollectionPageTranslation.of(context).collectionRenamingActionTitle,
      icon: Icon(
        CustomRegularIcons.pencil_medium,
        size: 24,
        color: CoreTheme.of(context).primaryColor,
      ),
      trailing: _buildTileTrailingPlaceholder(
        width: _kDefaultStateTileTrailingWidth,
      ),
      onPressed: onPressed,
    );
  }

  Widget _buildDeleteCollectionActionTile({
    required VoidCallback? onPressed,
    required BuildContext context,
  }) {
    return ActionTile(
      title: SingleCollectionPageTranslation.of(context).collectionDeletionActionTitle,
      icon: Icon(
        CustomRegularIcons.trash_can,
        size: 25,
        color: CoreTheme.of(context).primaryColor,
      ),
      trailing: _buildTileTrailingPlaceholder(
        width: _kDefaultStateTileTrailingWidth,
      ),
      onPressed: onPressed,
    );
  }

  Widget _buildMarkAlreadyKnownWordsActionTile({
    required bool knownLexicalItemSelectionPermitted,
    required VoidCallback? onPressed,
    required BuildContext context,
  }) {
    return ActionTile(
      title: SingleCollectionPageTranslation.of(context).markingAlreadyKnownWordActionTitle,
      icon: Icon(
        CustomRegularIcons.check,
        size: 24,
        color: CoreTheme.of(context).primaryColor,
      ),
      trailing: _buildTileTrailingPlaceholder(
        width: _kDefaultStateTileTrailingWidth,
      ),
      onPressed: onPressed,
      showPremiumBadge: !knownLexicalItemSelectionPermitted,
    );
  }

  Widget _buildAddLexicalItemActionTile({
    required bool lexicalItemAdditionPermitted,
    required VoidCallback? onPressed,
    required BuildContext context,
  }) {
    final Widget trailing;

    if (onPressed == null) {
      trailing = _buildTileTrailingPlaceholder(
        width: _kDefaultStateTileTrailingWidth,
      );
    } else {
      trailing = _buildTileNavigationIndicator();
    }

    return ActionTile(
      title: SingleCollectionPageTranslation.of(context).lexicalItemAdditionActionTitle,
      icon: Icon(
        CustomRegularIcons.plus,
        size: 25,
        color: CoreTheme.of(context).primaryColor,
      ),
      trailing: trailing,
      onPressed: onPressed,
      showPremiumBadge: !lexicalItemAdditionPermitted,
    );
  }

  // Widget _buildImportWordsFromCsvActionTile({
  //   required VoidCallback? onPressed,
  //   required BuildContext context,
  // }) {
  //   Widget trailing;
  //   if (onPressed == null) {
  //     trailing = _buildTileTrailingPlaceholder(
  //       width: _defaultStateTileTrailingWidth,
  //     );
  //   } else {
  //     trailing = _buildTileNavigationIndicator();
  //   }
  //
  //   return ScaledActionTile(
  //     title: SingleCollectionPageTranslation.of(context).csvLexicalItemImportActionTitle,
  //     icon: Icon(
  //       CustomRegularIcons.file_table,
  //       size: 24 ,
  //       color: CoreTheme.of(context).primaryColor,
  //     ),
  //     trailing: trailing,
  //     onPressed: onPressed,
  //   );
  // }

  // Widget _buildImportWordsFromTextActionTile({
  //   required VoidCallback? onPressed,
  //   required BuildContext context,
  // }) {
  //   Widget trailing;
  //   if (onPressed == null) {
  //     trailing = _buildTileTrailingPlaceholder(
  //       width: _defaultStateTileTrailingWidth,
  //     );
  //   } else {
  //     trailing = _buildTileNavigationIndicator();
  //   }
  //
  //   return ScaledActionTile(
  //     title: SingleCollectionPageTranslation.of(context).textLexicalItemImportActionTitle,
  //     icon: Icon(
  //       CustomRegularIcons.script_text,
  //       size: 24 ,
  //       color: CoreTheme.of(context).primaryColor,
  //     ),
  //     trailing: trailing,
  //     onPressed: onPressed,
  //   );
  // }

  Widget _buildRemoveWordsActionTile({
    required VoidCallback? onPressed,
    required BuildContext context,
  }) {
    return ActionTile(
      title: SingleCollectionPageTranslation.of(context).lexicalItemRemovalActionTitle,
      icon: Icon(
        CustomRegularIcons.medium_xmark,
        size: 23.5,
        color: CoreTheme.of(context).primaryColor,
      ),
      trailing: _buildTileTrailingPlaceholder(
        width: _kDefaultStateTileTrailingWidth,
      ),
      onPressed: onPressed,
    );
  }

  Widget _buildContent({
    required _SingleCollectionPageWlocState state,
    required BuildContext context,
  }) {
    if (state is _DefaultState) {
      return _buildDefaultStateContent(
        state: state,
        context: context,
      );
    }

    if (state is _KnownLexicalItemSelection) {
      return _buildKnownLexicalItemSelectionContent(
        state: state,
        context: context,
      );
    }

    if (state is _LexicalItemRemoval) {
      return _buildLexicalItemRemovalContent(
        state: state,
        context: context,
      );
    }

    if (state is _CustomCollectionRenaming) {
      return _buildCustomCollectionRenamingContent(
        state: state,
        context: context,
      );
    }

    throw UnimplementedError();
  }

  Widget _buildDefaultStateContent({
    required _DefaultState state,
    required BuildContext context,
  }) {
    final collectionActionTiles = <Widget>[];

    if (state.collection is CustomCollection) {
      collectionActionTiles.addAll([
        _buildRenameCollectionActionTile(
          onPressed: _wloc.onCustomCollectionRenamingTilePressed,
          context: context,
        ),
        _buildDeleteCollectionActionTile(
          onPressed: _wloc.onCollectionDeletionTilePressed,
          context: context,
        ),
      ]);
    }

    final lexicalItemActionTiles = <Widget>[];

    if (state.unspecifiedLexicalItemExists) {
      lexicalItemActionTiles.add(_buildMarkAlreadyKnownWordsActionTile(
        knownLexicalItemSelectionPermitted: state.knownLexicalItemSelectionPermitted,
        onPressed: _wloc.onKnownLexicalItemSelectionTilePressed,
        context: context,
      ));
    }

    if (state.collection is CustomCollection) {
      lexicalItemActionTiles.addAll([
        _buildAddLexicalItemActionTile(
          lexicalItemAdditionPermitted: state.lexicalItemAdditionPermitted,
          onPressed: _wloc.onLexicalItemAdditionTilePressed,
          context: context,
        ),
        // _buildImportWordsFromCsvActionTile(
        //   onPressed: () {},
        //   context: context,
        // ),
        // _buildImportWordsFromTextActionTile(
        //   onPressed: () {},
        //   context: context,
        // ),
      ]);
    }

    if (state.collection is CustomCollection && state.collectionLexicalItemModels.isNotEmpty) {
      lexicalItemActionTiles.add(_buildRemoveWordsActionTile(
        onPressed: _wloc.onLexicalItemRemovalTilePressed,
        context: context,
      ));
    }

    final topWidgets = <Widget>[
      const TileGap(),
    ];

    final actionTileGroupHeader = TileGroupHeader(
      title: HomeCoreTranslation.of(context).actionTileGroupHeader,
    );

    if (collectionActionTiles.isEmpty) {
      if (lexicalItemActionTiles.isNotEmpty) {
        topWidgets.addAll([
          RoundedTileGroup(
            header: actionTileGroupHeader,
            tiles: lexicalItemActionTiles,
          ),
          const TileGap(),
        ]);
      }
    } else {
      topWidgets.add(RoundedTileGroup(
        header: actionTileGroupHeader,
        tiles: collectionActionTiles,
      ));

      if (lexicalItemActionTiles.isNotEmpty) {
        topWidgets.addAll([
          const TileSeparator(),
          RoundedTileGroup(
            tiles: lexicalItemActionTiles,
          ),
        ]);
      }

      topWidgets.add(const TileGap());
    }

    if (state.collectionRepetitionProgresses != null) {
      topWidgets.addAll([
        RoundedTileGroup(
          header: TileGroupHeader(
            title: SingleCollectionPageTranslation.of(context).collectionRepetitionProgressHeader,
          ),
          tiles: [
            _CollectionRepetitionProgressView(
              repetitionProgresses: state.collectionRepetitionProgresses!,
            ),
          ],
        ),
        const TileGap(),
      ]);
    }

    if (state.collectionLexicalItemModels.isNotEmpty) {
      final title = HomeCoreTranslation.of(context).buildLexicalItemTileGroupHeader(
        lexicalItemCount: state.collectionLexicalItemModels.length,
      );

      final header = TileGroupHeader(
        title: title,
      );

      topWidgets.add(header);
    }

    return Scrollbar(
      child: PageTileHorizontalPadding(
        child: ExtendedListView(
          key: ValueKey(state.runtimeType),
          padding: EdgeInsets.zero,
          headerBuilder: (context) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: topWidgets,
            );
          },
          itemCount: state.collectionLexicalItemModels.length,
          itemBuilder: (context, index) {
            final lexicalItemModel = state.collectionLexicalItemModels[index];

            final progressInfo = buildLexicalItemProgressInfo(
              progressModel: lexicalItemModel.progressModel,
              context: context,
            );

            Widget lexicalItemTile = _LexicalItemTile(
              title: lexicalItemModel.title,
              translation: lexicalItemModel.translation,
              progressInfo: progressInfo,
              showPremiumBadge: !lexicalItemModel.permitted,
              trailing: _buildTileNavigationIndicator(),
              onPressed: () {
                _wloc.onDefaultStateLexicalItemTilePressed(
                  lexicalItemId: lexicalItemModel.id,
                );
              },
              onLeadingPressed: () {
                _wloc.pronounceLexicalItem(
                  lexicalItemTitle: lexicalItemModel.title,
                );
              },
            );

            if (index == 0) {
              lexicalItemTile = TileTopRounder(
                tile: lexicalItemTile,
              );
            }
            if (index == state.collectionLexicalItemModels.length - 1) {
              lexicalItemTile = TileBottomRounder(
                tile: lexicalItemTile,
              );
            }

            return lexicalItemTile;
          },
          dividerBuilder: (context, index) {
            return const PlatformDivider();
          },
          footerBuilder: (context) {
            return const TileGap();
          },
        ),
      ),
    );
  }

  Widget _buildCustomCollectionRenamingContent({
    required _CustomCollectionRenaming state,
    required BuildContext context,
  }) {
    final collectionActionTiles = [
      _buildRenameCollectionActionTile(
        onPressed: null,
        context: context,
      ),
      _buildDeleteCollectionActionTile(
        onPressed: null,
        context: context,
      ),
    ];

    final lexicalItemActionTiles = <Widget>[];

    if (state.unspecifiedLexicalItemExists) {
      lexicalItemActionTiles.add(_buildMarkAlreadyKnownWordsActionTile(
        knownLexicalItemSelectionPermitted: state.knownLexicalItemSelectionPermitted,
        onPressed: null,
        context: context,
      ));
    }

    lexicalItemActionTiles.addAll([
      _buildAddLexicalItemActionTile(
        lexicalItemAdditionPermitted: state.lexicalItemAdditionPermitted,
        onPressed: null,
        context: context,
      ),
      // _buildImportWordsFromCsvActionTile(
      //   onPressed: null,
      //   context: context,
      // ),
      // _buildImportWordsFromTextActionTile(
      //   onPressed: null,
      //   context: context,
      // ),
    ]);

    if (state.collectionLexicalItemModels.isNotEmpty) {
      lexicalItemActionTiles.add(_buildRemoveWordsActionTile(
        onPressed: null,
        context: context,
      ));
    }

    final topWidgets = <Widget>[
      const TileGap(),
    ];

    final actionTileGroupHeader = TileGroupHeader(
      title: HomeCoreTranslation.of(context).actionTileGroupHeader,
    );

    if (collectionActionTiles.isEmpty) {
      if (lexicalItemActionTiles.isNotEmpty) {
        topWidgets.addAll([
          RoundedTileGroup(
            header: actionTileGroupHeader,
            tiles: lexicalItemActionTiles,
          ),
          const TileGap(),
        ]);
      }
    } else {
      topWidgets.add(RoundedTileGroup(
        header: actionTileGroupHeader,
        tiles: collectionActionTiles,
      ));

      if (lexicalItemActionTiles.isNotEmpty) {
        topWidgets.addAll([
          const TileSeparator(),
          RoundedTileGroup(
            tiles: lexicalItemActionTiles,
          ),
        ]);
      }

      topWidgets.add(const TileGap());
    }

    if (state.collectionRepetitionProgresses != null) {
      topWidgets.addAll([
        RoundedTileGroup(
          header: TileGroupHeader(
            title: SingleCollectionPageTranslation.of(context).collectionRepetitionProgressHeader,
          ),
          tiles: [
            _CollectionRepetitionProgressView(
              repetitionProgresses: state.collectionRepetitionProgresses!,
            ),
          ],
        ),
        const TileGap(),
      ]);
    }

    if (state.collectionLexicalItemModels.isNotEmpty) {
      final title = HomeCoreTranslation.of(context).buildLexicalItemTileGroupHeader(
        lexicalItemCount: state.collectionLexicalItemModels.length,
      );

      final header = TileGroupHeader(
        title: title,
      );

      topWidgets.add(header);
    }

    return Column(
      children: [
        Expanded(
          child: Scrollbar(
            child: PageTileHorizontalPadding(
              child: ExtendedListView(
                key: ValueKey(state.runtimeType),
                padding: EdgeInsets.zero,
                headerBuilder: (context) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: topWidgets,
                  );
                },
                itemCount: state.collectionLexicalItemModels.length,
                itemBuilder: (context, index) {
                  final lexicalItemModel = state.collectionLexicalItemModels[index];

                  final progressInfo = buildLexicalItemProgressInfo(
                    progressModel: lexicalItemModel.progressModel,
                    context: context,
                  );

                  Widget lexicalItemTile = _LexicalItemTile(
                    title: lexicalItemModel.title,
                    translation: lexicalItemModel.translation,
                    progressInfo: progressInfo,
                    showPremiumBadge: !lexicalItemModel.permitted,
                    trailing: _buildTileTrailingPlaceholder(
                      width: _kDefaultStateTileTrailingWidth,
                    ),
                    onPressed: null,
                    onLeadingPressed: null,
                  );

                  if (index == 0) {
                    lexicalItemTile = TileTopRounder(
                      tile: lexicalItemTile,
                    );
                  }

                  if (index == state.collectionLexicalItemModels.length - 1) {
                    lexicalItemTile = TileBottomRounder(
                      tile: lexicalItemTile,
                    );
                  }

                  return lexicalItemTile;
                },
                dividerBuilder: (context, index) {
                  return const PlatformDivider();
                },
                footerBuilder: (context) {
                  return const TileGap();
                },
              ),
            ),
          ),
        ),
        CollectionListItemKeyboardTextField(
          controller: _wloc.collectionTitleTextEditingController,
          focusNode: _wloc.collectionTitleTextFieldFocusNode,
          placeholder: CollectionCoreTranslation.of(context).collectionTitleTextFieldPlaceholder,
          onSubmitted: _wloc.onCustomCollectionRenamingCompletionButtonPressed,
          shakeAnimationController: _wloc.shakeAnimationController,
        ),
        PlatformKeyboardPlaceholder(
          backgroundColor: CollectionCoreTheme.of(context).collectionListItemKeyboardTextFieldColor,
          tabBarHeight: kTabBarHeight + ScreenUtil().bottomBarHeight,
        ),
      ],
    );
  }

  Widget _buildKnownLexicalItemSelectionContent({
    required _KnownLexicalItemSelection state,
    required BuildContext context,
  }) {
    final topWidgets = <Widget>[
      const TileGap(),
    ];

    final lexicalItemTileGroupHeaderTitle =
        HomeCoreTranslation.of(context).buildLexicalItemTileGroupHeader(
      lexicalItemCount: state.unspecifiedCollectionLexicalItemModels.length,
    );

    final lexicalItemTileGroupHeader = TileGroupHeader(
      title: lexicalItemTileGroupHeaderTitle,
    );

    topWidgets.add(lexicalItemTileGroupHeader);

    return Scrollbar(
      child: PageTileHorizontalPadding(
        child: ExtendedListView(
          key: ValueKey(state.runtimeType),
          padding: EdgeInsets.zero,
          headerBuilder: (context) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: topWidgets,
            );
          },
          itemCount: state.unspecifiedCollectionLexicalItemModels.length,
          itemBuilder: (context, index) {
            final lexicalItemModel = state.unspecifiedCollectionLexicalItemModels[index];

            final Widget trailing;

            if (lexicalItemModel.selected) {
              trailing = const TileTrailingCheck();
            } else {
              trailing = _buildTileTrailingPlaceholder(
                width: kTileTrailingCheckWidth,
              );
            }

            final progressInfo = buildLexicalItemProgressInfo(
              progressModel: lexicalItemModel.progressModel,
              context: context,
            );

            Widget lexicalItemTile = _LexicalItemTile(
              title: lexicalItemModel.title,
              translation: lexicalItemModel.translation,
              progressInfo: progressInfo,
              showPremiumBadge: false,
              trailing: trailing,
              onPressed: () {
                _wloc.onKnownLexicalItemSelectionLexicalItemTilePressed(
                  lexicalItemId: lexicalItemModel.id,
                );
              },
              onLeadingPressed: () {
                _wloc.pronounceLexicalItem(
                  lexicalItemTitle: lexicalItemModel.title,
                );
              },
            );

            if (index == 0) {
              lexicalItemTile = TileTopRounder(
                tile: lexicalItemTile,
              );
            }

            if (index == state.unspecifiedCollectionLexicalItemModels.length - 1) {
              lexicalItemTile = TileBottomRounder(
                tile: lexicalItemTile,
              );
            }

            return lexicalItemTile;
          },
          dividerBuilder: (context, index) {
            return const PlatformDivider();
          },
          footerBuilder: (context) {
            return const TileGap();
          },
        ),
      ),
    );
  }

  Widget _buildLexicalItemRemovalContent({
    required _LexicalItemRemoval state,
    required BuildContext context,
  }) {
    final topWidgets = <Widget>[
      const TileGap(),
    ];

    // all lexical item seletion tile

    final String allLexicalItemSelectionTileTitle;

    if (state.allLexicalItemSelected) {
      allLexicalItemSelectionTileTitle =
          CollectionCoreTranslation.of(context).allLexicalItemDeselectionActionTileTitle;
    } else {
      allLexicalItemSelectionTileTitle =
          CollectionCoreTranslation.of(context).allLexicalItemSelectionActionTileTitle;
    }

    final allLexicalItemSelectionTile = ActionTile(
      title: allLexicalItemSelectionTileTitle,
      icon: Icon(
        CustomRegularIcons.check,
        size: 24,
        color: CoreTheme.of(context).primaryColor,
      ),
      onPressed: _wloc.onAllLexicalItemSelectionTilePressed,
    );

    topWidgets.addAll([
      RoundedTileGroup(
        header: TileGroupHeader(
          title: HomeCoreTranslation.of(context).actionTileGroupHeader,
        ),
        tiles: [
          allLexicalItemSelectionTile,
        ],
      ),
      const TileGap(),
    ]);

    //

    final lexicalItemTileGroupHeaderTitle =
        HomeCoreTranslation.of(context).buildLexicalItemTileGroupHeader(
      lexicalItemCount: state.collectionLexicalItemModels.length,
    );

    final lexicalItemTileGroupHeader = TileGroupHeader(
      title: lexicalItemTileGroupHeaderTitle,
    );

    topWidgets.add(lexicalItemTileGroupHeader);

    return Scrollbar(
      child: PageTileHorizontalPadding(
        child: ExtendedListView(
          key: ValueKey(state.runtimeType),
          padding: EdgeInsets.zero,
          headerBuilder: (context) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: topWidgets,
            );
          },
          itemCount: state.collectionLexicalItemModels.length,
          itemBuilder: (context, index) {
            final lexicalItemModel = state.collectionLexicalItemModels[index];

            final Widget trailing;

            if (lexicalItemModel.selected) {
              trailing = const TileTrailingCheck();
            } else {
              trailing = _buildTileTrailingPlaceholder(
                width: kTileTrailingCheckWidth,
              );
            }

            final progressInfo = buildLexicalItemProgressInfo(
              progressModel: lexicalItemModel.progressModel,
              context: context,
            );

            Widget lexicalItemTile = _LexicalItemTile(
              title: lexicalItemModel.title,
              translation: lexicalItemModel.translation,
              progressInfo: progressInfo,
              showPremiumBadge: !lexicalItemModel.permitted,
              trailing: trailing,
              onPressed: () {
                _wloc.onLexicalItemRemovalLexicalItemTilePressed(
                  lexicalItemId: lexicalItemModel.id,
                );
              },
              onLeadingPressed: () {
                _wloc.pronounceLexicalItem(
                  lexicalItemTitle: lexicalItemModel.title,
                );
              },
            );

            if (index == 0) {
              lexicalItemTile = TileTopRounder(
                tile: lexicalItemTile,
              );
            }

            if (index == state.collectionLexicalItemModels.length - 1) {
              lexicalItemTile = TileBottomRounder(
                tile: lexicalItemTile,
              );
            }

            return lexicalItemTile;
          },
          dividerBuilder: (context, index) {
            return const PlatformDivider();
          },
          footerBuilder: (context) {
            return const TileGap();
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return PrimaryScrollController(
      controller: _wloc.listViewScrollController,
      child: WlocBuilder<_SingleCollectionPageWloc, _SingleCollectionPageWlocState>(
        wloc: _wloc,
        builder: (context, state) {
          return CupertinoPageScaffold(
            resizeToAvoidBottomInset: false,
            backgroundColor: CoreTheme.of(context).backgroundColor,
            navigationBar: CupertinoNavigationBar(
              automaticallyImplyLeading: false,
              automaticallyImplyMiddle: false,
              padding: EdgeInsetsDirectional.zero,
              backgroundColor: CoreTheme.of(context).navigationBarColor,
              brightness: CoreTheme.of(context).brightness,
              leading: _buildNavigationBarLeading(
                state: state,
                context: context,
              ),
              trailing: _buildNavigationBarTrailing(
                state: state,
                context: context,
              ),
              middle: _buildNavigationBarMiddle(
                state: state,
                context: context,
              ),
            ),
            child: SizedBox.expand(
              child: _buildContent(
                state: state,
                context: context,
              ),
            ),
          );
        },
      ),
    );
  }
}
